<template>
    <div class="check-page" @click="setShow">
        <svg width="400" height="400" v-if="show">
            <circle
                fill="none"
                stroke="#68e534" 
                stroke-width="20"
                cx="200"
                cy="200"
                r="190"
                class="circle"
                stroke-linecap="round" 
                transform="rotate(-90 200 200)"
            />
            <polyline 
                fill="none" 
                stroke="#68e534"
                stroke-width="24" 
                points="88,214 179,284 304,138" 
                stroke-linecap="round"  
                stroke-linejoin="round"
                class="tick"
             />
        </svg> 
    </div>
</template>
<script>
import { ref } from 'vue'

export default{
    setup() {
        const show = ref(false)
        function setShow () {
            show.value = !show.value
        }
        return {
            show, setShow
        }
    }
}
</script>
<style lang="scss" scoped>
.check-page{
    width: 100%;
    height: 100px;
    
}
.box{
    width: 400px;
    height: 400px;
    background-color: pink;
}
.circle{
    stroke-dasharray: 1194; // 整体圆长度
    stroke-dashoffset: 0; // 偏移量
    animation: circle 1s ease-in-out;
    animation-fill-mode: forwards;
}

// input[type="checkbox"]:checked + svg .circle {
//   animation: circle 1s ease-in-out;
//   animation-fill-mode: forwards;
// }
.tick{
    stroke-dasharray: 350; // 整体圆长度
    stroke-dashoffset: 0; // 偏移量
    animation: tick 0.8s ease-in;
    animation-fill-mode: forwards;
}
input[type="checkbox"]:checked + svg .tick {
  animation: tick 0.8s ease-in;
  animation-fill-mode: forwards;
  
}
@keyframes circle {
    from{
        stroke-dashoffset: 1194;
    }
    to{
        stroke-dashoffset: 2388;
    }
}
@keyframes tick{
     from{
        stroke-dashoffset: 350;
    }
    to{
        stroke-dashoffset: 0;
    }
}
</style>